<!DOCTYPE html>
<div th:replace="~{ backend/app :: layout ('用户列表', _, ~{::#main}, _) }" xmlns:th="http://www.thymeleaf.org">
  <div class="content-wrapper" id="main">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-12 d-flex justify-content-between">
            <h1>用户列表</h1>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-body table-responsive p-0">
                <table class="table table-hover text-nowrap">
                  <thead>
                  <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Mobile</th>
                  </tr>
                  </thead>
                  <tbody>
                    <tr th:each="user : ${page.getContent()}">
                      <th th:text="${user.id}">ID</th>
                      <th th:text="${user.name}">Name</th>
                      <th th:text="${user.email}">Email</th>
                      <th th:text="${user.mobile}">Mobile</th>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
            <div id="pagination-container" class="pt-1">
              <p class="text-muted p-1">当前第 [[${page.getNumber()+1}]] 页，总计 [[${page.getTotalPages()}]] 页，共 [[${page.getTotalElements()}]] 条记录</p>
              <nav aria-label="Page navigation example">
                <ul class="pagination">
                  <li class="page-item" th:if="${page.hasPrevious()}">
                    <a class="page-link" href="#" th:href="${'/backend/user?page=' + page.getNumber()}">Previous</a>
                  </li>

                  <li th:class="${currentPageNumber == page.getNumber() + 1 ? 'page-item active' : 'page-item'}" class="page-item"
                      th:each="currentPageNumber:${#numbers.sequence(1, page.getTotalPages())}">
                    <a class="page-link" th:href="${'/backend/user?page=' + currentPageNumber}" href="#" th:text="${currentPageNumber}">页码</a>
                  </li>

                  <li class="page-item" th:if="${page.hasNext()}">
                    <a class="page-link" href="#" th:href="${'/backend/user?page=' + (page.getNumber() + 2)}">Next</a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>